<template>
  <div class="top">
    <div class="content">
        <!-- 左侧 -->
        <div class="left" @click="goHome">
          <img src="../../assets/images/logo.png" alt="">
          <p>尚医通 预约挂号统一平台</p>
        </div>
        <div class="right">
          <p class="help">帮助中心</p>
          <!-- 如果没有用户名字，显示登录注册 -->
          <p class="login" @click="login()" v-if="!userStore.userInfo.name">登录注册</p>
          <!-- 如果有用户信息，就展示用户信息 -->
          <el-dropdown v-else>
              <span>
                {{ userStore.userInfo.name }}
                <el-icon class="el-icon-right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="goUser('/user/certification')">实名认证</el-dropdown-item>
                  <el-dropdown-item @click="goUser('/user/order')">挂号订单</el-dropdown-item>
                  <el-dropdown-item @click="goUser('/user/pitient')">就诊人管理</el-dropdown-item>
                  <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
          </el-dropdown>
        </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ArrowDown } from '@element-plus/icons-vue';

  //获取 user 仓库的数据（visiable）数据可以控制 login 组件的对话框的显示与隐藏
  import useUserStore from '@/store/modules/user';
  let userStore = useUserStore();

  //引入 路由
  import { useRouter } from 'vue-router';
  //创建路由器对象
  let $router = useRouter();

  //回到首页
  const goHome = () => {
    //编程式导航调转到首页
    $router.push({path:'/home'});
  };

  //点击登录/注册按钮的时候弹出对话框
  const login = () => {
    userStore.visiable = true;
  };

  //退出登录按钮的回调
  const logout = () => {
    //通知 pinia 仓库清除用户相关信息
    userStore.logout();
    //编程式导航路由跳转到首页
    $router.push({path:'/home'});
  };

//点击顶部下拉菜单就行路由跳转
const goUser = (path: string) => {
    $router.push({path: path});
};
</script>
<style scoped lang="scss">
    .top {
      position:fixed;
      z-index: 999;
      width: 100%;
      height: 70px;
      background: #fff;
      display: flex;
      justify-content: center;
      .content {
        width: 1200px;
        height: 70px;
        background: white;
        display: flex;
        justify-content: space-between;
        .left {
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 50px;
            height: 50px;
          }
          p {
            font-size: 20px;
            color:#55a6fe;
          }
        }
        .right {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          color:#bbb;
          .help {
            margin-right: 10px;
          }
        }
      }
    }
</style>